<template>
  <div class="home">
    <!-- 1.疫情图片 -->
    <img src="../../assets/images/3401956761707181858-2.png" alt="" />
    <CovNumber
      :covData="covData"
      :modifyTime="modifyTime"
      class="demoItem"
      id="demoItem1"
    />
    <!-- 2.病毒信息和疫情热点 -->
    <CovInfo :news="news" />
    <!-- 3.疫情-小导航 -->
    <Navigation />
    <!-- 4.风险地区 -->
    <div class="num">
      <div class="tab">
        <div
          class="demoNavItem"
          v-for="(item, index) in demoNavItem"
          :key="index"
          :class="{ navActive: idx == index }"
          @click="changNav(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <CovArea
      :modifyTime="modifyTime"
      :DangerCount="DangerCount"
      class="demoItem"
      id="demoItem0"
    />
    <!-- 数据统计 -->
    <CovList />
    <!-- 5.中国地图 -->
    <ChianMap />
    <!-- 5.5.世界地图 -->
    <WorldMap />
    <!-- 6.国内统计 -->
    <div class="num">
      <div class="tab">
        <div
          class="demoNavItem"
          v-for="(item, index) in demoNavItem"
          :key="index"
          :class="{ navActive: idx == index }"
          @click="changNav(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <VueSwiper />
  </div>
</template>

<script>
var VueScrollTo = require("vue-scrollto");
import CovInfo from "./CovInfo/CovInfo.vue";
import Navigation from "./Navigation.vue";
import CovArea from "./CovInfo/CovArea.vue";
import CovNumber from "./CovInfo/CovNumber.vue";
import ChianMap from "./VueEcharts/ChianMap.vue";
import WorldMap from "./VueEcharts/WorldMap.vue";
import api from "../../api/index.js";
import VueSwiper from "./VueSwiper/VueSwiper.vue";
import CovList from "./CovList/CovList.vue";
export default {
  name: "Home",

  data() {
    return {
      idx: 0,
      news: [],
      modifyTime: {}, //每日更新的时间戳
      DangerCount: {}, //风险地区统计
      covData: {}, //全国数据统计
      demoNavItem: ["地区风险", "国内数据", "全球数据", "新冠疫苗"],
    };
  },
  components: {
    CovInfo,
    Navigation,
    CovArea,
    CovNumber,
    ChianMap,
    WorldMap,
    VueSwiper,
    CovList,
  },
  methods: {
    changNav: function (index) {
      this.idx = index;
      VueScrollTo.scrollTo(document.getElementById("demoItem" + index), {
        offset: -35,
      });
    },
  },
  created() {
    api.getCovInfo().then((res) => {
      // console.log(res.data);
      console.log(res.data.newslist[0]);
      //选择
      let data = res.data.newslist[0].desc;
      //1.时间刷新
      this.modifyTime = {
        modifyTime: data.modifyTime,
      };
      //2.疫情热点
      this.news = res.data.newslist[0].news;
      //3.疫情热点跳转链接
      //4.风险地区
      this.DangerCount = {
        highDangerCount: data.highDangerCount,
        midDangerCount: data.midDangerCount,
      };
      this.riskarea = res.data.newslist[0].riskarea;
      //5.全国疫情的数据统计信息--
      this.covData = {
        currentConfirmedCount: data.currentConfirmedCount,
        confirmedCount: data.confirmedCount,
        suspectedCount: data.suspectedCount,
        curedCount: data.curedCount,
        deadCount: data.deadCount,
        seriousCount: data.seriousCount,
        suspectedIncr: data.suspectedIncr,
        currentConfirmedIncr: data.currentConfirmedIncr,
        confirmedIncr: data.confirmedIncr,
        curedIncr: data.curedIncr,
        deadIncr: data.deadIncr,
        seriousIncr: data.seriousIncr,
      };
    });
    /**
     * currentConfirmedCount		  现存确诊人数
    confirmedCount		            累计确诊人数
    suspectedCount		            累计境外输入人数
    curedCount			              累计治愈人数
    deadCount		                  累计死亡人数
    seriousCount		              现存无症状人数
    suspectedIncr		              新增境外输入人数
    currentConfirmedIncr		      相比昨天现存确诊人数
    confirmedIncr		              相比昨天累计确诊人数
    curedIncr		                  相比昨天新增治愈人数
    deadIncr		                  相比昨天新增死亡人数
    seriousIncr		                相比昨天现存无症状人数
    yesterdayConfirmedCountIncr		相比昨天新增累计确诊人数
    yesterdaySuspectedCountIncr		相比昨天境外输入确诊人数
    highDangerCount		            国内高风险地区个数
    midDangerCount	    	        国内中风险地区个数
    modifyTime                    疫情时间
     */
  },
};
</script>
<style lang="less" scoped>
.home {
  img {
    width: 100%;
    display: block;
  }
  .num {
    background: #f5f5f5;
    padding-top: 0.4rem;
    .tab {
      height: 36px;
      background-color: #e6edff;
      border-radius: 0.2rem 0.2rem 0 0;
      display: flex;
      div {
        width: 100%;
        text-align: center;
        line-height: 36px;
        color: #404a60;
        font-weight: 15px;
        font-size: 15px;
      }
      .navActive {
        background-color: #ffffff;
        color: #4181ea;
        border-radius: 0.2rem 0.2rem 0 0;
      }
    }
  }
}
</style>
